import './index.less';
import React from 'react';
import { Form, Input, Button } from 'antd';
import { UserOutlined, LockOutlined, MailOutlined } from '@ant-design/icons';
import Validate from '../../utils/validate';

const FormItem = Form.Item;

class FormSimple extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            formData: {},
            validateOpts: [],
        };
    }

    componentWillMount() {
        let { dataSource } = this.props;
        this.setState({ formData: dataSource });
    }

    handleInput(item, e) { // input事件
        let { value } = e.target,
            { formData, validateOpts } = this.state,
            { eventHandler } = this.props;
        this.setState({
            formData: { ...formData, [item.key]: value },
            validateOpts: { ...validateOpts, [item.key]: true },
        });
        eventHandler({ item, type: 'change', value });
    }

    validateItem(item) { // 校验表单项
        let validate = true,
            msg = '',
            { formData } = this.state,
            value = formData[item.key];
        for (let i = 0; i < item.rules.length; i++) {
            let { type, message, validator } = item.rules[i];
            if ((type === 'customize' && !validator(value)) || (type !== 'customize' && !Validate(type, value))) {
                validate = false;
                msg = message;
                break;
            }
        }
        return { validate, message: msg };
    }

    validateAll() { // 表单全局校验
        let result = true,
            { formConfig } = this.props,
            config = formConfig;
        for (let item of config) {
            item.validate = item.rules ? this.validateItem(item).validate : true;
        }
        for (let i = 0; i < config.length; i++) {
            if (!config[i].validate) {
                result = false;
                break;
            }
        }
        return result;
    }

    renderIcons(type) {
        switch (type) {
            case 'user':
                return <UserOutlined />;
            case 'lock':
                return <LockOutlined />;
            case 'mail':
                return <MailOutlined />;
            default:
                return '';
        }
    }

    renderComponent(item) { // 渲染表单项
        let { eventHandler } = this.props,
            { formData } = this.state;
        switch (item.type) {
            case 'input':
                return (
                    <Input onChange={(val) => this.handleInput(item, val)}
                        placeholder={item.name} prefix={this.renderIcons(item.prefixIconType)}
                        type={item.inputType || 'text'} value={formData ? formData[item.key] : ''}
                    />
                )
            case 'button':
                return (
                    <Button
                        className="w-100"
                        onClick={() => eventHandler({
                            item, type: 'click', ...item.toValidate && { validate: this.validateAll() }
                        })}
                        type={item.btnType || 'primary'}
                    >
                        {item.name}

                    </Button>
                )
            default:
                return false;
        }
    }

    render() {
        let { validateOpts } = this.state,
            { formConfig } = this.props;
        return (
            <Form className="form-simple" layout="vertical">
                {formConfig.map((item) => {
                    let itemVali = item.rules ? this.validateItem(item) : null,
                        opt = validateOpts[item.key] && item.rules && itemVali && !itemVali.validate
                            ? { validateStatus: 'error', help: itemVali.message || '' }
                            : null;
                    return (
                        <FormItem key={item.key} {...opt}>
                            {this.renderComponent(item)}
                        </FormItem>
                    )
                })}
            </Form>
        );
    }
}
export default FormSimple;
